<template>
  <div class="container">
    <van-sticky>
      <div class="nav-bar" :style="'padding-top:' + statusBarHeight + 'px;'">
        <van-icon class="mar-l-12" name="arrow-left" size="20px" @click="$pt.navigateBack({ delta: -1 })" />
        <div class="width-238">
          <van-search :value="value" shape="round" @change="onChangeVal" @search="onSearch" placeholder="搜索手机号/订单号" />
        </div>
      </div>
    </van-sticky>
    <div class="order-list" v-if="!nodata">
      <!-- 订单循环位置 orders为订单数组 -->
      <div class="order-item" v-for="(item, index) in orders" :key="index">
        <div class="flex flex-between pad-t-7 pad-b-7 pad-l-15 pad-r-15 border-b font-13">
          <div class="v-align-c" @click="$pt.navigateTo({url: '/pages/shop/business-shop/main?enterpriseId=' + item.enterprise.enterpriseId})">
            <span v-if="item.enterprise">{{item.enterprise.enterpriseName}}</span>
            <van-icon name="arrow" size="13px" />
          </div>
          <div class="color-r">{{item.orderStatusName}}</div>
        </div>
        <div class="pad-l-15 pad-r-15" @click="$pt.navigateTo({ url: '/pages/personal/order/detail/main?orderId=' + item.orderId })">
          <div class="flex pad-t-13.5 pad-b-13.5">
            <img class="radius-5 width-79 height-79" :src="item.goodsImageUrl" alt="">
            <div class="flex-item mar-l-12.5">
              <div class="line-2 height-38 mar-t-15">{{item.goodsTitle}}</div>
              <div v-if="item.cancelFlag === 1" class="refund-color font-13 mar-t-5">退款中</div>
            </div>
          </div>
          <div>
            <!-- sku循环位置 -->
            <template v-for="(sku, skuIndex) in item.orderGoodsList">
              <div class="flex flex-between height-51.5 pad-l-10 pad-r-15 sku-row" :key="skuIndex" v-if="skuIndex < 2">
                <div class="font-12 font-color-6">
                  <div class="flex sku-detail" v-if="sku.skuDetail">
                    <div>规格：</div>
                    <div class="width-200 line-1">{{sku.skuDetail}}</div>
                  </div>
                  <div>￥{{sku.goodsPrice}}<span v-if="item.unit">/{{item.unit}}</span></div>
                </div>
                <div>×{{sku.goodsNum}}</div>
              </div>
            </template>
          </div>
          <div class="font-13 color-r flex flex-center pad-t-17 pad-b-17 border-b">
            <span>查看详情</span>
            <van-icon name="arrow" size="13px" color="#FF4E23" />
          </div>
          <div class="border-b">
            <div class="flex flex-between pad-t-11 pad-b-11">
              <div>共{{item.goodsNum}}件</div>
              <div>
                <span>合计：</span>
                <span class="color-r">￥{{item.actualPrice}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="btnbar pad-t-9 pad-b-9 pad-l-15 pad-r-15">
          <!-- 按钮，判断展示与否 -->
          <div class="btnbar-default btn" v-if="item.orderStatus === 0 || (item.orderStatus === 1 && item.cancelFlag === 0)" @click="cancelOrder(item)">取消订单</div>
          <div class="btnbar-default btn" v-if="item.orderStatus === 2 || item.orderStatus === 3 || item.orderStatus === 4" @click="queryExpress(item)">查看物流</div>
          <!-- 联系商家手机号码 -->
          <div class="btnbar-default btn" @click="$pt.makePhoneCall({phoneNumber: item.enterprise.phone})">联系商家</div>
          <div class="btnbar-pay btn" v-if="item.orderStatus === 0" @click="queryOrderInfo(item)">去付款</div>
          <div class="btnbar-pay btn" v-if="item.orderStatus === 2" @click="doReceiveGoods(item)">确认收货</div>
        </div>
      </div>
    </div>
    <div class="nodata" v-else>
      <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-datanone-2.png'" class="width-118 height-102" alt="">
      <div class="title">暂无数据</div>
    </div>
  </div>
</template>
<script>
import { pageOrder, updateOrderStatByMemberId, doReceiveGoods, checkCancelPaidOrder, cancelOrder } from '@/api/personal'
export default {
  data() {
    return {
      value: '',
      orders: [],
      nodata: false,
      pullLoad: {
        loading: false,
        finished: false
      },
      params: {
        size: 10,
        currentPage: 1
      },
      statusBarHeight: 0
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
    this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight']
  },
  mounted() {
    this.params.currentPage = 1
    this.orders = []
  },
  onPullDownRefresh() {
    this.params.currentPage = 1
    this.orders = []
    this.pageOrder()
    setTimeout(() => {
      this.$pt.stopPullDownRefresh()
    }, 500)
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageOrder()
    }
  },
  methods: {
    onSearch(e) {
      // 键盘直接搜索点击事件
      this.value = e.mp.detail
      this.params.currentPage = 1
      this.pullLoad.finished = false
      this.orders = []
      this.pageOrder()
    },
    onChangeVal(e) {
      this.value = e.mp.detail
    },
    pageOrder() {
      const params = {
        memberId: this.getShowBuyCard ? this.getCustomerId : this.getMemberId,
        orderStatus: '',
        currentPage: this.params.currentPage,
        size: 10,
        keyword: this.value
      }
      this.nodata = false
      this.$pt.showLoading()
      pageOrder(params).then(response => {
        this.$pt.hideLoading()
        if (response.isError) return
        response.data.records.forEach(order => {
          switch (order.orderStatus) {
            case 0:
              order.orderStatusName = '待付款'
              break
            case 1:
              order.orderStatusName = '待发货'
              break
            case 2:
              order.orderStatusName = '待收货'
              break
            case 3:
              order.orderStatusName = '已收货'
              break
            case 4:
              order.orderStatusName = '已完成'
              break
            case -1:
              order.orderStatusName = '已取消'
              break
            case -2:
              order.orderStatusName = '已取消'
              break
            default:
              break
          }
          this.orders.push(order)
        })
        if (this.orders.length === 0) {
          this.nodata = true
        }
        this.params.currentPage++
        if (this.orders.length === 0 || this.orders.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      })
      updateOrderStatByMemberId({
        memberId: this.getShowBuyCard ? this.getCustomerId : this.getMemberId,
        memberType: 2,
        orderType: 2,
        orderStatus: ''
      }).then(response => {
      })
    },
    cancelOrder(item) {
      // 取消订单事件
      // 订单里面都没有发货才可以取消订单，到订单取消页面
      // 否则提示联系卖家处理
      if (item.orderStatus === 0) {
        this.$pt.showModal({
          title: '温馨提示',
          content: '确认取消订单?',
          success: res => {
            if (res.confirm) {
              cancelOrder({orderId: item.orderId}).then(response => {
                if (response.isError) return
                this.$pt.navigateTo({url: `/pages/personal/order/detail/main?orderId=${item.orderId}`})
              })
            }
          }
        })
      } else {
        checkCancelPaidOrder({orderId: item.orderId}).then(response => {
          if (response.isError) return
          this.$pt.navigateTo({url: `/pages/personal/order/cancel-order/main?memberId=${item.memberId}&orderId=${item.orderId}`})
        })
      }
    },
    queryOrderInfo(order) {
      // 去支付
      this.$pt.navigateTo({ url: '/pages/personal/order/detail/main?orderId=' + order.orderId })
    },
    queryExpress(order) {
      // 查看物流
      this.$pt.navigateTo({ url: '/pages/personal/order/express/main?orderId=' + order.orderId })
    },
    doReceiveGoods(order) {
      // 确认收货
      const that = this
      this.$pt.showModal({
        content: '是否确认收货？',
        success(res) {
          if (res.confirm) {
            doReceiveGoods({ memberId: order.memberId, orderId: order.orderId }).then(response => {
              if (response.isError) return
              that.orders = []
              that.params.currentPage = 1
              that.pullLoad.finished = false
              that.pageOrder()
              const data = response.data
              const goodsNum = order.orderGoodsList.length
              const appName = !data.appName ? '' : data.appName
              const appId = !data.appId ? '' : data.appId
              const params = 'orderId=' + order.orderId + '&goodsNum=' + goodsNum + '&appName=' + appName + '&appId=' + appId + '&receivedTime=' + data.receivedTime
              that.$pt.navigateTo({ url: '/pages/personal/order/confirm-receipt/main?' + params })
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.nav-bar{
  height: 44px;
  background: white;
  display: flex;
  align-items: center;
  /deep/ .van-field__input{
    font-size: 12px;
  }
  /deep/ .van-search{
    padding: 0 12px;
  }
  .search-bar{
    height: 35px;
    width: 228px;
    border-radius: 17.5px;
    line-height: 35px;
    padding-left: 15px;
    box-sizing: border-box;
    color: #999999;
    background: #EEEEEE;
  }
}
.order-item{
  background: white;
  margin-top: 10px;
  &:first-child{
    margin-top: unset;
  }
}
.goods-content{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .line-2{
    max-height: 34px;
    height: unset;
  }
}
.border-b{
  border-bottom: 1px solid #E9E9E9;
}
.color-r{
  color: #FF4E23;
}
.sku-row{
  border-radius: 4px;
  background: #F8F8F8;
  margin-top: 7px;
  &:first-child{
    margin-top: 0;
  }
  .sku-detail{
    .line-1{
      line-height: unset;
    }
  }
}
.refund-status{
  line-height: 1.3;
  .line-1{
    height: unset;
  }
}
.btnbar{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .btn{
    font-size: 13px;
    border-radius: 13.5px;
    margin-left: 9px;
    width: 87px;
    height: 25px;
    line-height: 25px;
    text-align: center;
  }
  &-default{
    background: white;
    color: #999999;
    border: 1px solid #B6B6B6;
  }
  &-pay{
    width: 89px !important;
    height: 27px !important;
    line-height: 27px !important;
    background: linear-gradient(to right, #FF9048, #FF4E23);
    color: white;
  }
}
.myorder-btnbar{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  &-btn{
    padding: 10px 18px;
    font-size: 13px;
    border-radius: 17px;
    line-height: 1;
    margin-left: 9px;
  }
  &-default{
    background: white;
    color: #999999;
    border: 1px solid #B6B6B6;
  }
  &-pay{
    padding: 11px 18px !important;
    background: linear-gradient(to right, #FF9048, #FF4E23);
    color: white;
  }
}
.radius-5{
  border-radius: 5px;
}
.nodata{
  padding-top: 130px;
  img{
    margin: 0 auto;
  }
  .title{
    margin-top: 35px;
    text-align: center;
    font-size: 18px;
  }
}
// 修改vant tabs样式
.order-tabs{
  /deep/ .van-tabs--line{
    .van-tabs__wrap{
      height: 40px;
    }
  }
  /deep/ .van-tab {
    line-height: 40px;
  }
}
</style>
